<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <!-- <el-form-item label="" prop="hosp">
                <el-select v-model="queryParams.hosp" filterable placeholder="请选择医院">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->

            <el-form-item label="" prop="operateDeptId" v-if="queryParams.hosp">
                <el-select v-model="queryParams.operateDeptId" filterable placeholder="请选择所属科室" class="wp100">
                    <el-option v-for="item in deptAll" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="" prop="titleName">
                <el-input v-model="queryParams.titleName" placeholder="请输入问卷名称" clearable />
            </el-form-item>

            <!-- <el-form-item label="" prop="sourceName">
          <el-input v-model="queryParams.sourceName" placeholder="请输入来源" clearable />
        </el-form-item> -->

            <!-- <el-form-item label="" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
            <el-option v-for="dict in dict.type.topic_content_status" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item> -->

            <!-- <el-form-item label="开始时间" prop="beginTime">
          <el-date-picker v-model="queryParams.beginTime" type="date" value-format="yyyy-MM-dd" placeholder="开始时间">
          </el-date-picker>
         <el-input v-model="queryParams.beginTime" placeholder="开始时间" clearable  />
        </el-form-item> -->

            <!-- <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd" placeholder="结束时间">
          </el-date-picker>
          <el-input v-model="queryParams.endTime" placeholder="结束时间" clearable />
        </el-form-item> -->

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['hcem:content:export']">导出</el-button>
            </el-col> -->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="contentList" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="问卷模板名称" align="center" prop="titleName" />
            <el-table-column label="医院" align="center" prop="hospitalName" />
            <el-table-column label="科室" align="center" prop="deptName" />
            <!-- <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.topic_content_status" :value="scope.row.status" />
          </template>
</el-table-column> -->
            <el-table-column label="提交时间" align="center" prop="createTime" />
            <el-table-column label="填写所用时间" align="center" prop="useTime" />
            <el-table-column label="满意度" align="center" prop="synthesisScore">
                <template slot-scope="scope">
                    {{ scope.row.synthesisScore + '%' }}
                </template>
            </el-table-column>
            <el-table-column label="填写人ip" align="center" prop="ip" />
            <el-table-column label="来源" align="center" prop="sourceName" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row)">查看</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                        @click="handleMark(scope.row)">标记</el-button>
                </template>
            </el-table-column>
            <!-- <el-table-column label="ip所在地" align="center" prop="ipLocation" /> -->
            <!-- <el-table-column label="用户手机号" align="center" prop="userPhone" /> -->
            <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row)">查看</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleMark(scope.row)">标记</el-button>
          </template>
        </el-table-column> -->
            <!-- <el-table-column label="用户名称" align="center" prop="userName" /> -->
            <!-- <el-table-column label="医生id" align="center" prop="doctorId" />
        <el-table-column label="所属运营科室id" align="center" prop="operateDeptId" />
        <el-table-column label="使用模板id" align="center" prop="templateId" />
        <el-table-column label="链接id" align="center" prop="linkId" /> -->
            <!-- <el-table-column label="分值内容" align="center" prop="topicScoreInfo" /> -->

        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改问卷内容对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <!-- <el-form-item label="填写人ip" prop="ip">
            <el-input v-model="form.ip" placeholder="请输入填写人ip" />
          </el-form-item>
          <el-form-item label="问卷模板名称" prop="titleName">
            <el-input v-model="form.titleName" placeholder="请输入问卷模板名称" />
          </el-form-item>
          <el-form-item label="ip所在地" prop="ipLocation">
            <el-input v-model="form.ipLocation" placeholder="请输入ip所在地" />
          </el-form-item>
          <el-form-item label="医生id" prop="doctorId">
            <el-input v-model="form.doctorId" placeholder="请输入医生id" />
          </el-form-item>
          <el-form-item label="所属运营科室id" prop="operateDeptId">
            <el-input v-model="form.operateDeptId" placeholder="请输入所属运营科室id" />
          </el-form-item>
          <el-form-item label="使用模板id" prop="templateId">
            <el-input v-model="form.templateId" placeholder="请输入使用模板id" />
          </el-form-item>
          <el-form-item label="来源" prop="sourceName">
            <el-input v-model="form.sourceName" placeholder="请输入来源" />
          </el-form-item>
          <el-form-item label="医院" prop="hosp">
            <el-input v-model="form.hosp" placeholder="请输入医院" />
          </el-form-item>
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户名称" />
          </el-form-item>
          <el-form-item label="用户手机号" prop="userPhone">
            <el-input v-model="form.userPhone" placeholder="请输入用户手机号" />
          </el-form-item>
          <el-form-item label="链接id" prop="linkId">
            <el-input v-model="form.linkId" placeholder="请输入链接id" />
          </el-form-item>
          <el-form-item label="分值内容" prop="topicScoreInfo">
            <el-input v-model="form.topicScoreInfo" placeholder="请输入分值内容" />
          </el-form-item> -->

                <!-- <el-form-item label="分值内容" prop="topicScoreInfo">
            <el-input v-model="form.topicScoreInfo" placeholder="请输入分值内容" />
          </el-form-item> -->

                <el-form-item label="标记内容" prop="mark">
                    <el-input v-model="form.mark" placeholder="请输入标记内容" />
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="dict in dict.type.topic_content_status" :key="dict.value"
                            :label="parseInt(dict.value)">{{
                                dict.label }}</el-radio>
                    </el-radio-group>
                    <!-- <span class="p-l-30" style="color: #02C9F0;cursor: pointer;"
                        @click="$router.push({ path: '/system/dict-data/index/105' })">
                        管理
                    </span> -->
                </el-form-item>
                <!-- <el-form-item label="填写所用时间" prop="useTime">
            <el-input v-model="form.useTime" placeholder="请输入填写所用时间" />
          </el-form-item>
          <el-form-item label="综合得分" prop="synthesisScore">
            <el-input v-model="form.synthesisScore" placeholder="请输入综合得分" />
          </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listContent, getContent, delContent, addContent, updateContent, getDeptList } from "@/api/wenjuan/content";
//   import { getDeptList } from "@/api/hcem/doctor";
import { hosList } from "@/api/wenjuan/title";
import { setToken } from '@/utils/auth'
import { getQuesSystemToken } from "@/api/login";

export default {
    name: "Content",
    dictss: ['topic_content_status'],
    data() {
        return {
            deptAll: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 问卷内容表格数据
            contentList: [],
            // 弹出层标题
            title: "",
            options: [],//医院列表选项
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                hosp: null,
                sourceName: null,
                status: null,
                beginTime: '',
                endTime: ''
                // useTime: null,
                // synthesisScore: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                status: [
                    { required: true, message: "状态不能为空", trigger: "change" }
                ],
                mark: [
                    { required: true, message: "标记内容不能为空", trigger: "blur" }
                ],

            }
        };
    },
    computed: {
        findMyDeptlabel() {
            return (depValue) => {
                if (depValue) {
                    let findDept = this.deptAll.find(val => val.value == depValue)
                    if (findDept !== undefined) {
                        return findDept.label
                    } else {
                        return '科室ID错误'
                    }
                } else {
                    return '暂无'
                }
            }
        },
        findSex() {
            return (sexValue) => {
                if (sexValue == 2) return '男'
                if (sexValue == 1) return '女'
                if (sexValue == 0) return '未知'
            }
        }
    },
    async created() {
        // await this.codeToToken()
        await this.getHosList()
        await this.getList();
    },
    computed: {
        findMyDeptlabel() {
            return (depValue) => {
                if (depValue) {
                    let findDept = this.deptAll.find(val => val.value == depValue)
                    if (findDept !== undefined) {
                        return findDept.label
                    } else {
                        return '科室ID错误'
                    }
                } else {
                    return '暂无'
                }
            }
        },
    },
    methods: {
        async codeToToken() {
            // console.log('进入请求');
            let phoneNumber = localStorage.getItem('phonenumber') || ''
            let res = await getQuesSystemToken({ phoneNumber: phoneNumber })
            //let res = await getQuesSystemToken({ "code": code })
            if (res.code == 200) {
                //this.$router.push({path:'/home'})
                this.$store.commit('SET_TOKEN', res.data)
                setToken(res.data)
                // this.$router.push({ path: this.redirect || "/" }).catch(() => { });
            }
            //  console.log(res, 'getQuesSystemToken');
        },
        async getHosList() {
            let res = await hosList()
            let data = res.data
            data.forEach(v => {
                this.options.push({
                    value: v.hospital_code,
                    label: v.hospital_name
                })
            })
            if (data.length > 0) {
                this.myHosp(data[0].hospital_code)
            }
            // this.options.unshift({
            //   value: null,
            //   label: '全部医院'
            // })

            // console.log(res);
        },
        /** 查询问卷内容列表 */
        getList() {
            this.loading = true;
            listContent(this.queryParams).then(response => {
                this.contentList = []
                response.rows.forEach(v => {
                    let findArr = this.options.find(params => params.value == v.hosp)
                    // console.log(findArr,111);
                    if (findArr !== undefined) v['hospitalName'] = findArr.label

                    // let LabelList = this.allStatus.find(params => {
                    //  // console.log(params.value, 123, v.status);
                    //   return params.value == v.status
                    // })
                    // // console.log(LabelList);
                    // if (LabelList !== undefined) v.statusLabel = LabelList.label

                })
                this.contentList.push(...response.rows)
                // console.log( response.rows, 123);
                // if( response.rows !== undefined &&  response.rows.length > 0){
                //   this.myHosp(response.rows[0].hosp)
                // }
                this.total = response.total;
                this.loading = false;
            });
        },
        myHosp(val) {
            let parms = { hospitalCode: val }
            if (val) this.queryParams.hosp = val
            this.getMyDeptList(parms)
            // console.log(val,111);
        },
        async getMyDeptList(parms) {
            let res = await getDeptList(parms)
            if (res.code == 200) {
                this.deptAll = res.data.map(v => {
                    return {
                        value: v.id,
                        label: v.operateDeptName
                    }
                })
                //console.log(this.deptAll);
            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                ip: null,
                titleName: null,
                ipLocation: null,
                doctorId: null,
                operateDeptId: null,
                templateId: null,
                sourceName: null,
                hosp: null,
                userName: null,
                userPhone: null,
                linkId: null,
                topicScoreInfo: null,
                status: null,
                useTime: null,
                createTime: null,
                updateTime: null,
                synthesisScore: null,
                mark: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加问卷内容";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getContent(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改问卷内容";
            });
        },
        //标记
        handleMark(row) {
            this.handleUpdate(row)
        },
        //查看
        handleView(row) {
            // console.log(row);
            this.$router.push({ name: 'contentdetails', query: { id: row.id } })
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateContent(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addContent(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        // handleDelete(row) {
        //   const ids = row.id || this.ids;
        //   this.$modal.confirm('是否确认删除问卷内容编号为"' + ids + '"的数据项？').then(function() {
        //     return delContent(ids);
        //   }).then(() => {
        //     this.getList();
        //     this.$modal.msgSuccess("删除成功");
        //   }).catch(() => {});
        // },
        /** 导出按钮操作 */
        handleExport() {
            this.download('hcem/content/export', {
                ...this.queryParams
            }, `content_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>